<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Cursor Focus</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.js"></script>
		<script>
			var loop = 130000;

			let data = [
				Array(loop),
				Array(loop),
				Array(loop),
				Array(loop),
				Array(loop),
			];

			for (var i = 0; i < loop; i++) {
				let x = 2 * Math.PI * i / loop;
				let y = Math.sin(x);
				let y2 = Math.cos(x);
				let y3 = Math.log(x);

				data[0][i] = x;
				data[1][i] = y;
				data[2][i] = y2;
				data[3][i] = y3;
				data[4][i] = 1
			}

			const prepareChartOpts = (title, alpha, series, bias, prox) => {
				return {
					title,
					width: 1920,
					height: 600,
					hooks: {
						setSeries: [
							(u, seriesIdx, opts) => {
								if (opts.focus != null) {
									console.log("focus!", seriesIdx, opts);

									u.series.forEach((s, i) => {
										s.width = i == seriesIdx ? 2 : 1;
									});
								}
							}
						]
					},
					focus: {
						alpha,
					},
					cursor: {
						focus: {
							prox,
							bias,
							dist: (self, seriesIdx, dataIdx, valPos, curPos) => {
							//	if (seriesIdx == 4) {
							//		console.log('omit focus!');
							//		return Infinity;
							//	}

								return valPos - curPos
							}
						}
					},
					scales: {
						x: {
							time: false,
						},
						y: {
							range: [-2, 2]
						}
					},
					series: [
						{
							label: "x",
						},
						...series,
					],
				}
			}

			let u1 = new uPlot(prepareChartOpts('Cursor Focus', 0.3, [
				{
					label: "sin(x)",
					stroke: "red",
					fill: "rgba(255,0,0,0.1)",
				},
				{
					label: "cos(x)",
					stroke: "blue",
					fill: "rgba(0,0,255,0.1)",
				},
				{
					label: "log(x)",
					stroke: "green",
					fill: "rgba(0,255,0,0.1)",
				},
				{
					label: "flat_one",
					stroke: "purple",
				}
			], 1, 1e6), data, document.body);

			const focusColorSwitch = (focused, unfocused) => (u, idx) => {
				const series = u.series[idx];
				return series._focus === false ? unfocused : focused;
			};

			// setting alpha: 1.1 bypasses the internal (alpha == 1) check that skips redraw() on focus changes
			let u2 = new uPlot(prepareChartOpts('Dynamic Focus', 1.1, [
				{
					label: "sin(x)",
					stroke: focusColorSwitch("red", "black"),
					fill: focusColorSwitch("rgba(255,0,0,0.1)", "rgba(0,0,0,0.1)"),
				},
				{
					label: "cos(x)",
					stroke: focusColorSwitch("blue", "black"),
					fill: focusColorSwitch("rgba(0,0,255,0.1)", "rgba(0,0,0,0.1)"),
				},
				{
					label: "log(x)",
					stroke: focusColorSwitch("green", "black"),
					fill: focusColorSwitch("rgba(0,255,0,0.1)", "rgba(0,0,0,0.1)"),
				}
			], 0, 30), data, document.body);
		</script>

		<script>
			function getStroke(color) {
				return (u, seriesIdx) => u.series[seriesIdx]._focus ? 'magenta' : color;
			}

			let u3 = new uPlot({
				title: 'Width and stroke color change on focus',
				width: 1920,
				height: 600,
				focus: {
					alpha: 1,
				},
				cursor: {
					focus: {
						prox: 1e6,
					}
				},
				scales: {
					x: {
						time: false,
					},
					y: {
						range: [0, 30]
					}
				},
				series: [
					{},
					{
						label: 'A',
						stroke: getStroke('blue'),
					},
					{
						label: 'B',
						stroke: getStroke('green'),
					}
				],
				hooks: {
					setSeries: [
						(u, seriesIdx, opts) => {
							if (opts.focus != null) {
								u.series.forEach((s, i) => {
									s.width = i == seriesIdx ? 2 : 1;
								});
								u.redraw(false);
							}
						}
					]
				},
			}, [
				[0,1,2,3,4,5,6,7,8,9],
				...Array.from({length: 2}, (v, i) => Array(10).fill((i+1)*10)),
			],
			document.body);

			let u4 = new uPlot({
				title: 'Performance test (300 series)',
				width: 1920,
				height: 600,
				focus: {
					alpha: 0.1,
				},
				cursor: {
					focus: {
						prox: 1e6,
					}
				},
				scales: {
					x: {
						time: false,
					},
				},
				series: [
					{},
					...Array(300).fill({
						label: '0',
						stroke: '#000'
					})
				]
			}, [
				[0,1,2,3,4,5,6,7,8,9],
				...Array.from({length: 300}, (v, i) => Array(10).fill(i)),
			],
			document.body);
		</script>
	</body>
</html>
